<template>
  <div>
    <div
      id="waterPoloChart"
      ref="waterPoloChart"
      :style="{ width: chartWidth, height: chartHeight }"
    />
  </div>
</template>
  <script>
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    },

    chartWidth: {
      type: String,
      default: ""
    },
    chartHeight: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  created() {},
  computed: {
    chartOptions() {
      // let that = this
      const options = {
        title: {
          // left: "center",
          // subtext: this.chartData.name,
          // subtextStyle: {
          //   //文字样式
          //   color: "#fff",
          //   fontSize: 14,
          //   fontWeight: 600
          //   // bottom: "center"
          // },
          // itemGap: 10, //主副标题间距
          // bottom: 25,
          // textStyle: {
          //   color: "#333",
          //   fontWeight: "normal",
          //   fontSize: 14
          // }
        },
        series: [
          {
            // name: '水球图',
            type: "liquidFill",
            radius: "96%",
            center: ["50%", "50%"],
            waveAnimation: 10, // 动画时长
            amplitude: 7, // 振幅
            data: this.chartData.value, // 使用合并后的数据
            // data: [0.7],//水球百分比
            color: this.chartData.color, //设置波形颜色
            label: {
              normal: {
                color: "#fff", //百分比颜色
                textStyle: {
                  fontSize: 16,
                  fontWeight: "normal"
                }
              }
            },
            outline: {
              //外边框
              show: false,
              borderDistance: 5,
              itemStyle: {
                borderColor: "rgba(242, 136, 76,0)",
                borderWidth: 2
              }
            },
            backgroundStyle: {
              //水球背景色
              color: this.chartData.bgColor
            }
          }
        ]
      };
      return options;
    }
  },
  mounted() {
    console.log(this.chartData, "this.chartData");
    // this.$nextTick(() => {
    //   this.initEcharts();
    if (this.chartData !== null && this.chartData !== undefined) {
      this.initEcharts();
    }
    // });
  },
  methods: {
    // initChart () {
    //   const _this = this;
    //   _this.waterPoloChart = echarts.init(this.$refs.waterPoloChart);
    //   window.addEventListener("resize", function () {
    //     _this.waterPoloChart.resize();
    //   });
    // },
    initEcharts() {
      // 初始化echarts实例
      const _this = this;
      _this.waterPoloChart = echarts.init(this.$refs.waterPoloChart);
      // 显示图表
      _this.waterPoloChart.setOption(this.chartOptions);
    }
  }
};
</script>
  <style lang='less'  scoped></style>